/*dCEn1mJutp0XJqKQXUvPwCn2N+vzT/ZH7GHNNCUIH9uuCd3reKyS+K5aywNPGpSB*/
import React, { Component } from 'react';
import echarts from 'echarts';
import { toggleShow, changeTime } from '../events';
import constant from '../../constants';
import ampub from 'ampub';
const { utils } = ampub;
const { multiLangUtils, getThemeUtils } = utils;
const { getMultiLangByID } = multiLangUtils;

export default class SurePage extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const blackColor = '#d9d9d9';
        const { echartsData, that } = this.props;
        const { total_num, linedata } = echartsData;
        const { name, data } = linedata;
        const formatterTemp = getMultiLangByID('201203004A-000007', { total_num }); /* '总共{total_num }个资产'*/
        const option = {
            series: [
                {
                    name: getMultiLangByID('201203004A-000014') /* 资产总数*/,
                    type: 'pie',
                    radius: ['55%', '65%'],
                    center: ['35%', '50%'],
                    avoidLabelOverlap: false, // 是否允许提示文字重叠，false 提示语显示在中心
                    label: {
                        normal: {
                            show: true,
                            position: 'center',
                            formatter: formatterTemp,
                            color: '#ccc',
                            fontSize: 18
                        }
                    },
                    data: [{ value: 335 }]
                }
            ],
            color: ['#20CBAF']
        };
        const optionLine = {
            title: {
                text: getMultiLangByID('201203004A-000015') /* 如下人员去盘点*/,
                x: 'left',
                align: 'right',
                textStyle: {
                    fontSize: 16,
                    fontWeight: 'normal',
                    color: getThemeUtils() == 'black' ? blackColor : '#333'
                }
            },
            // 悬浮提示框
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function(params) {
                    const xAxis = params[0].name;
                    const nameArr = params.map(({ seriesName }) => seriesName);
                    const dataArr = params.map(({ data }) => data);
                    let totalNum = 0;
                    for (let i = 0; i < dataArr.length; i++) {
                        totalNum += dataArr[i].value * 1;
                    }
                    let str = '';
                    for (let i = 0; i < nameArr.length; i++) {
                        str += `<p>${nameArr[i]}：<span>${dataArr[i].value}</span></p >`;
                    }
                    const content = getMultiLangByID('201203004A-000001', { totalNum }); /* 共分配{totalNum}个资产*/
                    return `<div class="toolTip">
                            <p>${xAxis} <span>${content}</span></p >
                            ${str}
                            </div>`;
                }
            },
            legend: {
                data: [
                    {
                        name: getMultiLangByID('201203004A-000004') /* 未盘*/,
                        textStyle: { color: getThemeUtils() == 'black' ? blackColor : '#333' }
                    },
                    {
                        name: getMultiLangByID('201203004A-000003') /* 已盘*/,
                        textStyle: { color: getThemeUtils() == 'black' ? blackColor : '#333' }
                    }
                ]
            },
            // 数据区域放缩
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    filterMode: 'filter',
                    start: 0,
                    end: 50
                }
            ],
            xAxis: [
                {
                    type: 'category',
                    data: name,
                    // data: [ '张三', '李四', '王五', '张强', '李倩', '何红', '王丽' ],
                    axisTick: {
                        // 是否显示坐标刻度线
                        show: false
                    },
                    axisLine: {
                        // 坐标轴是否显示
                        show: true,
                        lineStyle: { color: getThemeUtils() == 'black' ? blackColor : '#333' }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    splitLine: {
                        // 是否显示网格线
                        show: false
                    },
                    axisTick: {
                        // 是否显示坐标刻度线
                        show: false
                    },
                    axisLine: {
                        // 坐标轴是否显示
                        show: true,
                        lineStyle: { color: getThemeUtils() == 'black' ? blackColor : '#333' }
                    },
                    minInterval: 1
                }
            ],
            series: [
                {
                    name: getMultiLangByID('201203004A-000004') /* 未盘*/,
                    type: 'bar',
                    stack: getMultiLangByID('201203004A-000005') /* 总量*/,
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                const colorList = ['#20CBAF', '#20CBAF', '#20CBAF', '#20CBAF'];
                                return colorList[params.dataIndex];
                            }
                        }
                    },
                    data
                },
                {
                    name: getMultiLangByID('201203004A-000003') /* 已盘*/,
                    type: 'bar',
                    stack: getMultiLangByID('201203004A-000005') /* 总量*/,
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // 控制柱状图的颜色
                                const colorList = ['#FF9A48', '#FF9A48', '#FF9A48', '#FF9A48'];
                                return colorList[params.dataIndex];
                            }
                        }
                    },
                    data: []
                }
            ],
            color: ['#20CBAF', '#FF9A48']
        };
        const myChart = echarts.init(document.getElementById('echartPieBox'));
        const myChartLine = echarts.init(document.getElementById('echartsLineBox'));
        myChart.setOption(option);
        myChartLine.setOption(optionLine);
        // 当浏览器窗口发生变化时候，echarts大小随着变化
        window.addEventListener('resize', () => {
            myChart.resize();
            myChartLine.resize();
        });
        // 当离开当前窗口时触发
        window.onbeforeunload = () => {
            if (that.state.isLeaveOrRefresh) {
                return '';
            }
        };

        // 点击事件 -- 点击柱状图
        myChartLine.on('click', (params) => {
            if (params.name === getMultiLangByID('201203004A-000006') /* 未分配人员*/) {
                if (that.state.inventoryStatus == 'confirmed' || that.state.inventoryStatus == 'confirmedAllot') {
                    // 只要在第三步确认页面，无论如何都应该只取页面数据，后端有已分配的数据？？
                    // ajax({
                    // 	url: constant.URL.QUERY_NOINVENCHECKUSER,
                    // 	data: {
                    // 		pk: that.state.pk_inventory
                    // 	},
                    // 	success: (res) => {
                    // 		that.setState({ current: 1, inventoryStatus: 'confirmedAllot' }, () => {
                    // 			this.props.cardTable.setTableData(
                    // 				constant.AREA.STEP.ANEWALLOT,
                    // 				res.data.body[constant.AREA.CARD.BODY_AREA]
                    // 			);
                    // 			toggleShow(that, that.props);
                    // 			this.props.cardTable.setStatus(constant.AREA.STEP.ANEWALLOT, 'edit');
                    // 		});
                    // 	}
                    // });

                    // 找出未盘点的卡片
                    const rows = [];
                    that.childformData.body.forEach((row) => {
                        const checkUserPks = row.values.inventory_checkuser.value;
                        if (!checkUserPks) {
                            rows.push(row);
                        }
                    });

                    // 取this.childformData.body数据进行显示
                    that.setState({ current: 1, inventoryStatus: 'confirmedAllot' }, () => {
                        this.props.cardTable.setTableData(
                            constant.AREA.STEP.ANEWALLOT,
                            {
                                areaType: 'table',
                                areacode: constant.AREA.STEP.ANEWALLOT,
                                rows
                            }
                        );
                        toggleShow(that, that.props);
                        this.props.cardTable.setStatus(constant.AREA.STEP.ANEWALLOT, 'edit');
                    });
                } else {
                    that.setState({ current: 1, inventoryStatus: 'unAllot' }, () => {
                        if (
                            that.tempCardTableDatas
							&& that.tempCardTableDatas.rows
							&& that.tempCardTableDatas.rows.length > 0
                        ) {
                            this.props.cardTable.setTableData(constant.AREA.STEP.ANEWALLOT, that.tempCardTableDatas);
                        }
                        toggleShow(that, that.props);
                        this.props.cardTable.setStatus(constant.AREA.STEP.ANEWALLOT, 'edit');
                    });
                }
            } else {
                // 点击柱状图，因为时确认页面的数据，还没有保存，所以继续跳转到未分配页面，继续进行盘点
                const rows = [];
                that.childformData.body.forEach((row) => {
                    // 找出当前点击的盘点人的数据
                    const checkUserPks = row.values.inventory_checkuser.value;
                    if (checkUserPks && checkUserPks.indexOf(params.data.id) != -1) {
                        rows.push(row);
                    }
                });

                // 取this.childformData.body数据进行显示
                that.setState({ current: 1, inventoryStatus: 'unAllot' }, () => {
                    this.props.cardTable.setTableData(
                        constant.AREA.STEP.ANEWALLOT,
                        {
                            areaType: 'table',
                            areacode: constant.AREA.STEP.ANEWALLOT,
                            rows
                        }
                    );
                    toggleShow(that, that.props);
                    this.props.cardTable.setStatus(constant.AREA.STEP.ANEWALLOT, 'edit');
                });
            }
        });
    }

    render() {
        const { echartsData, that } = this.props;
        const { start_date, end_date, search_range, check_range } = echartsData;
        const { inventoryStatus } = that.state;
        const { bill_code } = that;
        let start_date_temp = '';
        let end_date_temp = '';
        start_date != null && (start_date_temp = changeTime(start_date));
        end_date != null ? (end_date_temp = changeTime(end_date)) : (end_date_temp = '');

        return (
            <div className="echarts-area">
                <div id="echartPieBox" />
                <div className="assetInfo nc-theme-title-font-c">
                    {inventoryStatus == 'confirmed' && (
                        <p>
                            <span className="title nc-theme-title-font-c">
                                {getMultiLangByID('201203004A-000008') /* 单据号*/}：
                            </span>
                            <span className="msg nc-theme-title-font-c">{bill_code}</span>
                        </p>
                    )}
                    <div>
                        <span className="title nc-theme-title-font-c">
                            {getMultiLangByID('201203004A-000010') /* 盘点时间*/}：
                        </span>{' '}
                        <p className="scope-p">
                            <span className="msg nc-theme-title-font-c">{start_date_temp}</span>---<span className="msg">{end_date_temp}</span>
                        </p>

                    </div>
                    {check_range ? (
                        <div className="nc-theme-title-font-c">
                            <p>
                                <span className="title nc-theme-title-font-c">
                                    {getMultiLangByID('201203004A-000013') /* 盘点范围*/}：
                                </span>
                            </p>
                            {inventoryStatus == 'confirmed' || inventoryStatus == 'confirmedAllot' ? (
                                <p>
                                    <div className="nc-theme-title-font-c">
                                        <span className="msg">{check_range}</span>
                                    </div>
                                </p>
                            ) : (
                                <p className="scope-p">
                                    {search_range.conditions.map((conditionItem) => {
                                        const rangeDetail = that.props.meta.getMeta().childform1.items.forEach((nameItem) => {
                                            if (nameItem.attrcode == conditionItem.field) {
                                                return (
                                                    <div className="nc-theme-title-font-c">
                                                        <span className="msg">{nameItem.label}</span>
                                                        <span className="msg">{conditionItem.oprtype}</span>
                                                        <span className="msg scope-text" title={conditionItem.display}>
                                                            {conditionItem.display}
                                                        </span>
                                                    </div>
                                                );
                                            }
                                        });
                                        return rangeDetail;
                                    })}
                                </p>
                            )}
                        </div>
                    ) : (
                        ''
                    )}

                    <p />
                </div>
                <div className="divisionLine" />
                <div id="echartsLineBox" />
            </div>
        );
    }

}

/*dCEn1mJutp0XJqKQXUvPwCn2N+vzT/ZH7GHNNCUIH9uuCd3reKyS+K5aywNPGpSB*/